<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .spot_img {
            color: #FFFFFF;
            text-align: center;
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 8888;
            -webkit-transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<!--车位图-->
<canvas id="park-area" onmousedown="drawParking();ShowCoord(this,event)" width="600" height="600"
        style="border:1px solid;position:absolute;left:100px;top:100px;">
    <img src="logo.jpg" alt="">
</canvas>
<!--车位定位图-->
<canvas id="park" draggable="true" width="20" height="20"
        style="border:1px solid;position:absolute;left:100px;top:100px;">
</canvas>

<div class="spot_img" data-pnumber="B1" data-status="3" data-id="244" style="background-color: rgb(221, 0, 0); width: 300px; height: 300px; border-radius: 300px; font-size: 120px; line-height: 300px; top: 200.325px; left: 200.24239px;">已售</div>

<script src="vender/jquery-3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="vender/jcanvas/jcanvas.min.js"></script>
<script>
    //绘制车位图
    function drawParkArea() {
        var canvas = document.getElementById('park-area');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext('2d');
        //开始代码
        var img = document.querySelector('img');
        ctx.drawImage(img, 0, 0);

        ctx.globalCompositeOperation = 'source-over';
        drawSallIcon(ctx, 20, 20, 20, 20, '售', '#09f');
        drawSallIcon(ctx, 80, 80, 20, 20, '订', '#09f');
    }
    function drawParking() {
        var canvas = document.getElementById('park-area');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext('2d');
        ctx.globalCompositeOperation = 'source-over';
        drawSallIcon(ctx, 300, 20, 20, 20, '售', '#09f');
        drawSallIcon(ctx, 300, 80, 20, 20, '订', '#09f');
    }
    //绘制定位车位图
    function drawPark() {
        var canvas = document.getElementById('park');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext('2d');
        //开始代码
        ctx.fillStyle = '#FD0';
        ctx.fillRect(0, 0, 50, 50);
    }
    //绘制图标
    function drawSallIcon(canvas2D, x, y, radius, size, content, color) {
        canvas2D.beginPath();
        canvas2D.fillStyle = color;
        canvas2D.arc(x, y, radius, 0, Math.PI * 2);
        canvas2D.closePath();
        canvas2D.fill();
        canvas2D.fillStyle = 'rgba(255,255,255)';
        canvas2D.font = size + 'px Microsoft YaHei';
        canvas2D.textAlign = 'center';
        canvas2D.textBaseline = 'middle';
        canvas2D.fillText(content, x, y);
        return canvas2D;
    }
    //鼠标点击后canvas到鼠标点击位置
    function ShowCoord(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        var border = parseFloat(canvas.style.border);
        var data = new Object();
        data.x = event.clientX - rect.left - border;
        data.y = event.clientY - rect.top - border;
        $('#park').css({left: event.clientX, top: event.clientY});
        console.log(data);
    }
    //鼠标拖动后canvas到鼠标拖动位置
    var box = document.getElementById('park');
    var body = document.getElementById('park-area');
    var drag = function () {
        var boxCSS = document.defaultView.getComputedStyle(box, null);
        var innerX, innerY;// 鼠标距别拖曳元素左边界和上边界的距离
        var rect = body.getBoundingClientRect();
        var x = 0;
        var y = 0;

        function startDrag(el, target) {
            el.addEventListener("dragstart", function (event) {
                innerX = event.clientX - parseInt(boxCSS.left);
                innerY = event.clientY - parseInt(boxCSS.top);
            }, false);
            el.addEventListener("dragend", function (event) {
                this.style.left = event.clientX - innerX + 'px';
                this.style.top = event.clientY - innerY + 'px';
                x = event.clientX - innerX - rect.left;
                y = event.clientY - innerY - rect.top;
                console.log(x + '-' + y);
            }, false);
            target.addEventListener("dragenter", function (event) {
                event.preventDefault()
            }, false);
            target.addEventListener("dragover", function (event) {
                event.preventDefault()
            }, false);
            target.addEventListener("drop", function (event) {
                event.preventDefault();
            }, false)
        }

        return startDrag
    }();
    drag(box, body);
    //定位车位移动
    document.onkeydown = function (event) {
        var park = document.getElementById('park');
        event = event || window.event;
        var keyCode = event.keyCode;
        var t = parseFloat(park.style.top) || park.offsetTop;
        var l = parseFloat(park.style.left) || park.offsetLeft;

        var rect = body.getBoundingClientRect();
        var x = 0;
        var y = 0;
        if (keyCode == 38) {//按上键
            event.preventDefault();
            park.style.top = t - 1 + "px";
            y = t - 1 - rect.top;
            x = l - rect.left;
        }
        else if (keyCode == 37) {//按左键
            event.preventDefault();
            park.style.left = l - 1 + "px";
            y = t - rect.top;
            x = l - 1 - rect.left;
        }
        else if (keyCode == 39) {//按右键
            event.preventDefault();
            park.style.left = l + 1 + "px";
            y = t - rect.top;
            x = l + 1 - rect.left;
        }
        else if (keyCode == 40) {//按下键
            event.preventDefault();
            park.style.top = t + 1 + "px";
            y = t + 1 - rect.top;
            x = l - rect.left;
        }
        console.log('x:' + x + ',y:' + y);
    };
    //添加车位
    function addPark() {
        var canvas = document.getElementById('park-area');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext('2d');
        ctx.globalCompositeOperation = 'source-over';
        drawSallIcon(ctx, 150, 150, 20, 20, '售', '#09f');
    }
    drawParkArea();
    drawPark();
    addPark();
</script>
</body>
</html>